<template>
  <view class="file-preview">
    <!-- PDF预览 -->
    <template v-if="fileType === 'pdf'">
      <web-view :src="previewUrl"></web-view>
    </template>

    <!-- Office文件预览 -->
    <template v-else-if="isOfficeFile">
      <web-view :src="getOfficePreviewUrl"></web-view>
    </template>

    <!-- 图片预览 -->
    <template v-else-if="isImageFile">
      <image :src="fileUrl" mode="aspectFit" class="w-full h-full" />
    </template>

    <!-- 不支持预览的文件类型 -->
    <template v-else>
      <view class="unsupported-file">
        <wd-icon name="document" size="48rpx" color="#999" />
        <text class="text-[28rpx] color-#333 mt-[16rpx]">暂不支持该类型文件预览</text>
        <wd-button type="primary" size="small" class="mt-[24rpx]" @click="downloadFile">
          下载文件
        </wd-button>
      </view>
    </template>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-mask">
      <wd-loading size="36rpx" />
      <text class="text-[24rpx] color-#999 mt-[16rpx]">加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps({
  fileUrl: {
    type: String,
    required: true,
  },
  fileName: {
    type: String,
    required: true,
  },
})

const loading = ref(false)

// 文件类型判断
const fileType = computed(() => {
  const ext = props.fileName.split('.').pop()?.toLowerCase() || ''
  return ext
})

const isImageFile = computed(() => {
  return ['jpg', 'jpeg', 'png', 'gif'].includes(fileType.value)
})

const isOfficeFile = computed(() => {
  return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(fileType.value)
})

// 获取Office文件预览URL
const getOfficePreviewUrl = computed(() => {
  // 使用微软Office在线预览服务
  return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(props.fileUrl)}`
})

// PDF预览URL
const previewUrl = computed(() => {
  if (fileType.value === 'pdf') {
    // 可以使用PDF.js或其他PDF预览服务
    return `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(props.fileUrl)}`
  }
  return props.fileUrl
})

// 下载文件
const downloadFile = () => {
  loading.value = true
  uni.downloadFile({
    url: props.fileUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({
              title: '文件已保存',
              icon: 'success',
            })
          },
          fail: () => {
            uni.showToast({
              title: '保存失败',
              icon: 'none',
            })
          },
        })
      }
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'none',
      })
    },
    complete: () => {
      loading.value = false
    },
  })
}
</script>

<style lang="scss" scoped>
.file-preview {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.unsupported-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32rpx;
}

.loading-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
}
</style>
